<template>
	<view v-show="showCardPopup">
		<view class="card-popup" >
			<view class="card-popup-card">
				<view class="card-popup-list">
					<view v-for="(item, index) in listData" :key="index" class="card-popup-item card-popup-item-select">
						<view class="card-popup-title" @click="checkItem(item)">{{item.title}}</view>
					</view>
				</view>
				<view class="card-popup-footer">
					<view class="card-popup-item card-popup-item-btn" @click="showCardPopup=false">Cancel</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"card-popup",
		props: {
		    listData: {
		      type: Array,
		      default: () => []
		    }
		},
		data() {
		    return {
		        showCardPopup: false,
		    };
		},
		methods: {
		    show() {
				this.showCardPopup = true;
		    },
			close(){
				this.showCardPopup = false;
			},
			checkItem(e){
				console.log(e)
				const result = { id: e.id, title: e.title } // 用户选择的数据
				this.$emit('checkItem', result) // 触发自定义事件 :ml-citation{ref="6" data="citationList"}
			}
		}
	}
</script>

<style>
	.card-popup{
		position: fixed; /* 固定定位 */
		top: 0;
		left: 0;
		width: 100%; /* 宽度100% */
		height: 100%; /* 高度100% */
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
	}
	.card-popup-card{
		position: fixed;
		bottom: 68rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9999;
		width: 718rpx;
	}
	.card-popup-list{
		
	}
	.card-popup-list .card-popup-item-select:first-of-type{
		border-radius: 24rpx 24rpx 0 0;
	}
	.card-popup-list .card-popup-item-select:last-of-type{
		border-radius: 0 0 24rpx 24rpx;
	}
	.card-popup-item{
		padding: 34rpx 0;
		background: rgba(243,243,243, 1);
		text-align: center;
		margin: 0 auto;
	}
	.card-popup-title{
		color: #007AFF;
		font-size: 34rpx;
	}
	.card-popup-footer{
		margin-top: 16rpx;
	}
	.card-popup-item-btn{
		font-weight: 600;
		color: #007AFF;
		border-radius: 24rpx;
	}
	.card-popup-item:not(:last-child) {
		border-bottom: 1rpx solid #dbdbdb;
	}
</style>